<template>
  <div>
    <div class="mb_10">
        <i class="el-icon-arrow-left commhover" @click="back"></i>
        <span class="textunder ccolor commhover f-13" @click="back">活动名称（点击返回上一级）</span>
        <span class="ccolor f-13"> / 中奖名称</span>
    </div>
    <div class="bg_fff full-w p_20 full_h">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="intabs">
        <el-tab-pane label="全部" name="first">
          <win-list ref="first" v-if="activeName=='first'" type='' @downsuccess='downsuccess'/>
        </el-tab-pane>
        <el-tab-pane label="已核销" name="second">
          <win-list ref="second" v-if="activeName=='second'" :type='1' @downsuccess='downsuccess' />
        </el-tab-pane>
        <el-tab-pane label="未核销" name="third" >
          <win-list  ref="third" v-if="activeName=='third'" :type='0' @downsuccess='downsuccess'/>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="fourth" >
          <win-list ref="fourth" v-if="activeName=='fourth'" :type='2' @downsuccess='downsuccess'/>
        </el-tab-pane>
        <el-tab-pane label="已发货" name="fifth" >
          <win-list ref="fifth" v-if="activeName=='fifth'" :type='3' @downsuccess='downsuccess'/>
        </el-tab-pane>
      </el-tabs>
      <div class="topabsoult">
        <el-button type="primary" size="mini" class="mr_20" icon="el-icon-refresh-right" @click="onRefulsh">刷新</el-button>
        <el-button type="primary" size="mini" icon="el-icon-download" :loading='exportloading' @click="onDown">导出中奖信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import WinList from "./WinList.vue";
export default {
  components: { WinList },
  data() {
    return {
      activeName: "first",
      exportloading:false
    };
  },
  created(){
    let id = this.$route.query.id
    if(id){
      // this.getList()
    }
  },
  methods: {
    handleClick() {},

    back(){
        this.$router.back()
    },

    onRefulsh(){
      this.$refs[this.activeName].reflush()
    },

    downsuccess(){
      this.exportloading = false
    },

    onDown(){
      this.exportloading = true
      // console.log('exportloading:',exportloading)
      this.$refs[this.activeName].download()
    }
  },
};
</script>

<style lang="scss" scoped>
.intabs {
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0 !important;
  }
  ::v-deep .el-tabs__item {
    padding: 0 32px;
  }
}
.full_h {
  height: 100%;
  position: relative;
}
.ccolor{
    color: #585858;
}
.textunder{
  text-decoration: underline;
}
.topabsoult{
    position: absolute;
    top: 26px;
    right: 20px;
}
</style>